<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
  <div>
      <Row>
        <Col span="24">
            <Card>
                <p slot="title">成绩列表</p>
                <Row>
                    <div style="width:260px;float:left;">
                                                                赛事名称
			            <Select style="width:180px;margin-left:5px;" clearable @on-clear="clearMatchName" @on-change="matchSelect" placeholder="赛事名称" v-model="search.matchId" filterable remote :remote-method="searchMatchMethod" :loading="searchMatchloading">
                            <Option v-for="(match, index) in optionMatchs" :value="match" :key="index">{{match}}</Option>
			            </Select>
		            </div>
		            <div style="width:260px;float:left;">
                                                                赛事类型 
                        <Select style="width:180px;margin-left:5px;" clearable @on-clear="clearMatchType" :disabled="disabledMatchType" placeholder="赛事类型" v-model="search.matchTypeId" filterable remote :remote-method="searchMatchTypeMethod" :loading="searchMatchTypeloading">
			                <Option v-for="(match, index) in optionTypeMatchs" :value="match" :key="index">{{match}}</Option>
			            </Select>
		            </div>
		            <div style="width:260px;float:left;">
                                                                证件号码
                        <Input style="width:180px;margin-left:5px;" @on-keyup.enter="handleSearch" v-model="search.cardNo" placeholder="证件号码"></Input>                                        
		            </div>
		            <div style="width:260px;float:left;">
                                                               手机号码
                        <Input style="width:180px;margin-left:5px;" @on-keyup.enter="handleSearch" v-model="search.phone" placeholder="手机号码"></Input>                                        
		            </div>
                    <Button @click="handleSearch" type="primary" shape="circle" icon="ios-search"></Button>
                    <div style="margin-top:20px;">
                        <Button style="float:left;" type="primary" :loading="exportDrawUserLoading" @click="exportDrawUser">导出成绩模板</Button>
                        <Upload style="float:left;margin-left:10px;width:150px;" 
                            :action="baseURL+'/result/importResult'"
                            :data="search" 
                            :headers="headers" 
                            name="file" 
                            :format="['xlsx']"
                            :before-upload="beforeImportDrawUser"
                            :on-success="successImportDrawUser"
                            :on-error="errorImportDrawUser">
						    <Button type="primary" icon="ios-cloud-upload-outline">导入成绩</Button>
						</Upload>
						<!-- <Button style="float:left;margin-left:10px;" type="primary" :loading="sendDrawMessageLoading" @click="sendDrawMessage">短信通知用户中签</Button> -->
                        <!-- <Button style="float:left;margin-left:10px;" type="primary" :loading="noticeReceiveEquipmentLoading" @click="sendReceiveEquipment">短信通知用户领取装备</Button> -->
                    </div>
                </Row>
                <br>
                <Row>
                    <div class="edittable-table-height-con">
                        <Table stripe :loading="isLoading" :columns="columns" :data="companys" border disabled-hover></Table>
                        <div style="margin: 10px;overflow: hidden">
                            <div style="float: right;">
                                <Page :total="total" :current="currentPage" :page-size="20" @on-change="changePage" show-elevator></Page>
                            </div>
                        </div>
                    </div>
                </Row>
            </Card>
        </Col>
      </Row>
      <Modal v-model="detailModal" title="成绩详情">
          <div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>赛事名称：</span>
	                  <span style="margin-left:10px;">{{orderInfo.matchName}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>赛事类型：</span>
	                  <span style="margin-left:10px;">{{orderInfo.matchTypeName}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>姓名：</span>
	                  <span style="margin-left:10px;">{{orderInfo.name}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>手机号码：</span>
	                  <span style="margin-left:10px;">{{orderInfo.phone}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>性别：</span>
	                  <span style="margin-left:10px;">{{orderInfo.sexy === 1 ? '男' : '女'}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>血型：</span>
	                  <span style="margin-left:10px;">{{orderInfo.bloodType}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>证件类型：</span>
	                  <span style="margin-left:10px;">{{orderInfo.cardType}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>证件号码：</span>
	                  <span style="margin-left:10px;">{{orderInfo.cardNo}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>价格：</span>
	                  <span style="margin-left:10px;">{{orderInfo.price / 100}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>支付截止时间：</span>
	                  <span style="margin-left:10px;">{{orderInfo.payEndTime}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>订单状态：</span>
	                  <span style="margin-left:10px;">{{orderStatus[orderInfo.status]}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>订单实付总额：</span>
	                  <span style="margin-left:10px;">{{orderInfo.amount / 100}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>支付状态：</span>
	                  <span style="margin-left:10px;">{{orderPayStatus[orderInfo.payStatus]}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>抽签状态：</span>
	                  <span style="margin-left:10px;">{{orderDrawStatus[orderInfo.drawStatus]}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>所在地：</span>
	                  <span style="margin-left:10px;">{{orderInfo.province+orderInfo.city+orderInfo.area}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>收货地址：</span>
	                  <span style="margin-left:10px;">{{orderInfo.address}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>紧急联系人：</span>
	                  <span style="margin-left:10px;">{{orderInfo.contact}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>紧急联系电话：</span>
	                  <span style="margin-left:10px;">{{orderInfo.contactPhone}}</span>
	              </div>
              </div>
              <div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>服装尺码：</span>
	                  <span style="margin-left:10px;">{{orderInfo.size}}</span>
	              </div>
	              <div style="float:left;width:50%;height:30px;">
	                  <span>创建时间：</span>
	                  <span style="margin-left:10px;">{{orderInfo.createTime}}</span>
	              </div>
              </div>
              <div>&nbsp</div>
          </div>
          <div slot="footer">
              <Button type="primary" @click="detailModal=false">关闭</Button>
          </div>
      </Modal>
  </div>

</template>

<script>
import { mapGetters } from 'vuex';
import dataTable from '../my-components/data-table/editableTable.vue';
import axios from 'axios';
export default {
    name: 'company-index',
    components: {
        dataTable
    },
    computed: {
        ...mapGetters(['baseURL'])
    },
    data () {
        return {
            isLoading: false,
            searchMatchloading: false,
            searchMatchTypeloading: false,
            optionMatchs: [],
            optionTypeMatchs: [],
            exportDrawUserLoading: false,
            sendDrawMessageLoading: false,
            noticeReceiveEquipmentLoading: false,
            orderStatus: {1: '待抽签', 2: '待支付', 3: '已支付', 4: '已过期'},
            orderPayStatus: {1: '待支付', 2: '已支付'},
            orderDrawStatus: {1: '待抽签 ', 2: '已中签 ', 3: '无需抽签'},
            orderInfo: {},
            detailModal: false,
            disabledMatchType: true,
            headers: {
                token: localStorage.getItem('token')
            },
            // 表头
            columns: [
                {
                    title: '姓名',
                    align: 'center',
                    key: 'name'
                },
                {
                    title: '手机号',
                    align: 'center',
                    key: 'phone'
                },
                {
                    title: '证件号码',
                    align: 'center',
                    key: 'cardNo'
                },
                {
                    title: '赛事名称',
                    align: 'center',
                    key: 'matchName'
                },
                {
                    title: '赛事类型',
                    align: 'center',
                    key: 'typeName'
                },
                // {
                //     title: '抽签状态',
                //     angin: 'center',
                //     render: (h, params) => {
                //         return h('span', {}, this.orderDrawStatus[params.row.drawStatus]);
                //     }
                // },
                {
                    title: '号码牌',
                    align: 'center',
                    key: 'noCard'
                },
                {
                    title: '比赛名次',
                    align: 'center',
                    key: 'ranking'
                },
                {
                    title: '比赛成绩',
                    align: 'center',
                    key: 'result'
                },
                {
                    title: '证书',
                    align: 'center',
                    key: 'cert'
                },
                {
                    title: '操作',
                    align: 'center',
                    render: (h, params) => {
                        const row = params.row;
                        if (this.$hasPerms('result:delete')) {
                            return h('Poptip',
                                {
                                    props: {
                                        confirm: true,
                                        title: '您确定要删除吗?',
                                        transfer: true
                                    },
                                    on: {
                                        'on-ok': () => {
                                            this.handleDelete(row);
                                        }
                                    }
                                },
                                [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small',
                                            icon: 'trash-a',
                                            shape: 'circle'
                                        },
                                        style: {
                                            margin: '2px 5px'
                                        }
                                    }, '删除')
                                ]
                            );
                        } else {
                            return h('span', {}, '无');
                        }
                    }
                }
            ],
            // 数据
            companys: [],
            total: 0,
            currentPage: 1,
            search: {
                // status: null
            },
            importUser: {}
        };
    },
    methods: {
        searchMatchMethod (query) {
            this.searchMatchloading = true;
            setTimeout(() => {
                this.$get('/result/matchSelector', {matchName: query})
                    .then(res => {
                        this.searchMatchloading = false;
                        this.optionMatchs = res.records;
                    })
                    .catch(error => {
                        this.searchMatchloading = false;
                        this.$Message.error(error.msg || error.message);
                    });
            }, 200);
        },
        searchMatchTypeMethod (query) {
            this.searchMatchTypeloading = true;
            setTimeout(() => {
                this.$get('/result/matchTypeSelector', {matchName: this.search.matchId, matchTypeName: query})
                    .then(res => {
                        this.searchMatchTypeloading = false;
                        this.optionTypeMatchs = res.records;
                    })
                    .catch(error => {
                        this.searchMatchTypeloading = false;
                        this.$Message.error(error.msg || error.message);
                    });
            }, 200);
        },
        beforeImportDrawUser () {
            // if (!this.search.matchId) {
            //     this.$Message.error('请填写赛事');
            //     return false;
            // }
            // if (!this.search.matchTypeId) {
            //     this.$Message.error('请填写赛事类型');
            //     return false;
            // }
            return true;
        },
        successImportDrawUser (response) {
            if (response.status === '0') {
                this.getData();
                this.$Message.success('导入成功');
            } else {
                this.$Message.error(response.message);
            }
        },
        errorImportDrawUser (error) {
            this.$Message.error(error.message);
        },
        exportDrawUser () {
            // if (!this.search.matchId) {
            //     this.$Message.error('请填写赛事');
            //     return false;
            // }
            // if (!this.search.matchTypeId) {
            //     this.$Message.error('请填写赛事类型');
            //     return false;
            // }
            this.exportDrawUserLoading = true;
            axios({
                method: 'get',
                url: this.baseURL + '/result/exportResultDemo',
                responseType: 'blob',
                timeout: 3000000,
                headers: {
                    token: localStorage.getItem('token')
                }
            })
                .then((res) => {
                    const blob = new Blob([res.data]);
                    let fileName = '成绩模板.xlsx';
                    if ('download' in document.createElement('a')) { // 非IE下载
                        const elink = document.createElement('a');
                        elink.download = fileName;
                        elink.style.display = 'none';
                        elink.href = URL.createObjectURL(blob);
                        document.body.appendChild(elink);
                        elink.click();
                        URL.revokeObjectURL(elink.href);
                        document.body.removeChild(elink);
                    } else { // IE10+下载
                        navigator.msSaveBlob(blob, fileName);
                    }
                    this.exportDrawUserLoading = false;
                }).catch(fail => {
                    this.exportDrawUserLoading = false;
                    this.$Message.error('导出失败');
                });
        },
        sendDrawMessage () {
            if (!this.search.matchTypeId) {
                this.$Message.error('请填写赛事类型');
                return;
            }
            this.sendDrawMessageLoading = true;
            this.$post('/order/noticeDraw', this.search)
                .then(res => {
                    this.getData();
                    this.sendDrawMessageLoading = false;
                    this.$Message.success('操作成功');
                })
                .catch(error => {
                    this.sendDrawMessageLoading = false;
                    this.$Message.error(error.message);
                });
        },
        sendReceiveEquipment () {
            if (!this.search.matchId) {
                this.$Message.error('请填写赛事');
                return;
            }
            this.noticeReceiveEquipmentLoading = true;
            this.$post('/order/noticeReceiveEquipment', this.search)
                .then(res => {
                    this.noticeReceiveEquipmentLoading = false;
                    this.$Message.success('操作成功');
                })
                .catch(error => {
                    this.noticeReceiveEquipmentLoading = false;
                    this.$Message.error(error.msg || error.message);
                });
        },
        getData () {
            // if (!this.search.matchId) {
            //     this.$Message.error('请填写赛事');
            //     return;
            // }
            // if (!this.search.matchTypeId) {
            //     this.$Message.error('请填写赛事类型');
            //     return;
            // }
            let searchTemp = JSON.parse(JSON.stringify(this.search));
            delete searchTemp.matchId;
            delete searchTemp.matchTypeId;
            this.isLoading = true;
            this.$get('/result/list?pageNum=' + this.currentPage, searchTemp)
                .then(res => {
                    this.companys = res.records;
                    this.total = res.total;
                    this.currentPage = res.current;

                    this.isLoading = false;
                })
                .catch(error => {
                    this.isLoading = false;
                    this.$Message.error(error.msg || error.message);
                });
        },
        handleSearch () {
            this.currentPage = 1;
            // delete this.search.matchName;
            // delete this.search.matchTypeName;
            // this.optionMatchs.forEach(r => {
            //     if (r.id === this.search.matchId) {
            //         this.search.matchName = r.matchName; // 搜索赛事id改成赛事名称
            //     }
            // });
            // this.optionTypeMatchs.forEach(r => {
            //     if (r.id === this.search.matchTypeId) {
            //         this.search.matchTypeName = r.typeName; // 搜索类型id改成类型名称
            //     }
            // });
            this.search.matchName = this.search.matchId;
            this.search.matchTypeName = this.search.matchTypeId;
            this.getData();
        },
        handleDelete (val, index) {
            // 删除
            axios({
                method: 'delete',
                url: this.baseURL + '/result?id=' + val.id,
                headers: {token: localStorage.getItem('token')}
            }).then((res) => {
                this.$Message.success('删除成功');
                this.getData();
            }).catch(fail => {
                this.$Message.error(fail.message);
            });
        },
        changePage (pageNum) {
            this.currentPage = pageNum;
            this.getData();
        },
        matchSelect (value) {
            this.search.matchTypeId = '';
            if (value) {
                this.disabledMatchType = false;
                this.searchMatchTypeMethod();
            } else {
                this.disabledMatchType = true;
            }
        },
        clearMatchName () { this.optionMatchs = []; },
        clearMatchType () { this.optionTypeMatchs = []; }
    }
};
</script>
